<template>
  <el-dialog title="记录" v-model="dialogVisible" @close="handleClose" width="800px">
    <div v-for="(item, index) in row" :key="index">
      <div class="box">
        <div class="company"><strong>企业名称:</strong> {{ item.out_company_name }}</div>
        <div class="admin"><strong>业务员:</strong> {{ item.out_admin_name }}</div>
        <div class="money"><strong>金额:</strong> {{ item.billAmount }}</div>
        <div class="date"><strong>时间:</strong> {{ item.out_time }}</div>
      </div>
    </div>
    <span class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineEmits } from "vue"
import { getBillHistoryApi } from "@/api/billv2"

const dialogVisible = ref<boolean>(false)
const row = ref<any>(null)

const getBillHistorys = (el: any) => {
  getBillHistoryApi({
    bill_id: el.bill_id
  })
    .then((res: any) => {
      row.value = res.data
    })
    .catch(() => {})
    .finally(() => {})
}

function showClick(row: any | undefined) {
  console.log(row)
  getBillHistorys(row)
  dialogVisible.value = true
}
defineExpose({ showClick })
// 定义 emits
const emit = defineEmits(["close"])

// 关闭弹框
const handleClose = () => {
  emit("close")
}
</script>

<style scoped>
.box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .company {
    width: calc(100% - 420px);
  }
  .admin {
    width: 100px;
  }
  .money {
    width: 120px;
  }
  .date {
    width: 200px;
  }
}
</style>
